<template>
    <div>
    </div>
</template>




<script setup lang='ts'>
import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";



// TODO:根据参考结果调整模型生成效果
import { Main,CreateModelFromData,
  LoadModelMain } from '../scripts/LoadLakeMesh';

import { GetURLContent } from "../scripts/GetURLContent";
import { ParseLakeDATFromFileContent } from "../scripts/functionsLab";


// -------------------------Threejs部分内容-----------------
// 初始化场景
const scene = new THREE.Scene();

// 创建相机
// const camera = new THREE.PerspectiveCamera(
//   75, //视角
//   window.innerWidth / window.innerHeight, //宽高比
//   0.1, // 近平面
//   1000 // 远平面
// );
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100000);


// 设置相机位置
camera.position.set(1000,1000,5000);
// 设置相机朝向点
camera.lookAt(0, 0, 0);


// 创建渲染器
const renderer = new THREE.WebGLRenderer({
  //设置抗锯齿
  antialias:true,
});
// 设置渲染器大小为窗口大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 添加到界面中
document.body.appendChild(renderer.domElement);


// 添加轨道控制器(控制的是相机)
const controls = new OrbitControls(camera, renderer.domElement);
// 设置带阻尼的惯性
controls.enableDamping = true;
// 设置阻尼系数，系数越小惯性越大
controls.dampingFactor = 0.05;

// 鼠标控制
controls.mouseButtons = {
  //左键平移
  LEFT: THREE.MOUSE.PAN,
  //滚轮滑动
  MIDDLE: THREE.MOUSE.DOLLY,
  //右键旋转
  RIGHT: THREE.MOUSE.ROTATE,
};

// AxesHelper：辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

//----------------------
// 添加具体的代码

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);
const helper = new THREE.DirectionalLightHelper(directionalLight, 1);
scene.add(helper);
directionalLight.castShadow = true;

renderer.shadowMap.enabled = true;

// NOTE:主函数入口

LoadModelMain(scene);









// 循环渲染

function render() {
  controls.update();

  // 每帧执行此函数
  requestAnimationFrame(render);

  // 渲染
  renderer.render(scene, camera);

}

render();

// 监听窗口变化更新renderer
window.addEventListener("resize", () => {
  // console.log("resize");
  // 重置渲染器宽高比
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 重置相机宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新相机投影矩阵
  camera.updateProjectionMatrix();
});


</script>

<style scoped>
/* 铺满整个网页 */
*{
  margin:0;
  padding: 0;
}
/* 设置画布canvas铺满，并位于左上角 */
canvas{
  width:100vw;
  height:100vh;
  position:fixed;
  left:0;
  top:0;
}

.button-container {
  position: absolute;
  display: grid;
  grid-template-columns: 1fr; 
  gap: 10px; 
  z-index: 99;
}


</style>
